<!DOCTYPE html>
<!--
demo描述：演示jCutter的使用方法、
作者：czb
时间：2015/9/20 16:00
注：如果使用本demo请勿删除此描述。
-->
<html>
    <head>
        <title>jCutter 演示 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="../jQuery-1.10.2.js" type="text/javascript"></script>
		<script src="../jQuery.jCutter.js" type="text/javascript"></script>
		<script type="text/javascript">

			$(function(){
				$('#demo_img').jCutter({
					width:400,
					height:400,
					autoAjust: false,
					limitEdge: false,
					maskColor: 'green',
					cutChange: function(c){
						$('#x').val(c.x);
						$('#y').val(c.y);
						$('#width').val(c.width);
						$('#height').val(c.height);
						$('#cutWidth').val(c.cutWidth);
						$('#cutHeight').val(c.cutHeight);
					}
				});
				$('#autoAjust').bind('click',function(){
					if(this.checked){
						$('#demo_img').jCutter({
							autoAjust: true
						});
						load();
					}
					else{
						$('#demo_img').jCutter({
							autoAjust: false
						});
					}
				});
				$('#limitEdge').bind('click',function(){
					if(this.checked){
						$('#demo_img').jCutter({
							limitEdge: true
						});
					}
					else{
						$('#demo_img').jCutter({
							limitEdge: false
						});
					}
				});
				load();
			});
			function load(){
				$('#demo_img').attr('src','./demo.jpg?' + Math.random());
			}
		</script>
		<style>
			.info{
				margin: 0;
				border:solid 2px red;
				border-radius: 4px;
				width: 400px;
				height: 300px;
				box-shadow: 5px 5px 5px;
				background-color: yellow;
				color: gray;
				text-align: right;
				font-size: 20px;
			}
			input{
				font-size: 20px;
				border: none;
				background: none;
				width: 150px;
			}
			.info p{
				margin-right: 100px;
			}
		</style>
    </head>
    <body>
        <img id="demo_img" />
		<br />
		<center>
		<label for="autoAjust">自动调整</label>
		<input id="autoAjust" type="checkbox" style="width:auto" />&nbsp;&nbsp;&nbsp;
		<label for="limitEdge">限制边缘</label>
		<input id="limitEdge" type="checkbox" style="width:auto" /><br /><br />
			<div class="info">
				<p>x:<input id="x" type="text" /></p>
				<p>y:<input id="y" type="text" /></p>
				<p>width:<input id="width" type="text" /></p>
				<p>height:<input id="height" type="text" /></p>
				<p>cutWidth:<input id="cutWidth" type="text" /></p>
				<p>cutHeight:<input id="cutHeight" type="text" /></p>
			</div>
		</center>
    </body>
</html>
